<template>
  <el-form
    label-suffix=":"
    v-loading="loading"
    
    :model="formData"
    :rules="type == 'add' || type == 'edit'|| type == 'forceEdit'  ? formRules : ''"
    ref="formRef"
    label-width="160px"
  >
      <vp-card>
        <template #header>
          <vp-label zh="基础信息" en="Basic Information"/>
        </template>
        <el-row>
           <vp-col :span="4" >
              <el-form-item prop="bh">
                <template #label><vp-label zh="隐患编号" en="Hazard No."/></template>
                <el-input maxlength="100"
                v-model.trim="formData.bh"
                placeholder="不填写则自动生成"
                v-if="type === 'add' || type === 'edit' || type === 'forceEdit'"
              />
              <sapn v-else>{{ formData.bh }}</sapn>
              </el-form-item>
          </vp-col>
          <vp-col :span="4" >
              <el-form-item prop="zdbs">
                <template #label><vp-label zh="重大安全隐患" en="Major Hazard"/></template>
                  <el-radio-group v-model="formData.zdbs" v-if="type === 'add' || type === 'edit' || type === 'forceEdit' ">
                      <el-radio :label="1">是 YES</el-radio>
                      <el-radio :label="0">否 NO</el-radio>
                  </el-radio-group>
                  <span v-else>{{ formData.zdbs == 1 ? '是 YES' : formData.zdbs == 0 ? '否 NO'  : '' }}</span>
              </el-form-item>
          </vp-col>
          <vp-col :span="2" >
              <el-form-item prop="lydj">
                <template #label><vp-label zh="来源单据" en="Source Document"/></template>
                  <el-link v-if="formData.glaqyhid" type="info" class="foc-link" :underline="false"  @click="handleViewGlyh">由部门转入:{{ formData.glaqyhbh}}</el-link>
                  <el-link v-else-if="formData.glzgfkdid" type="info" class="foc-link" :underline="false"  @click="handleViewZgfkd">整改反馈单:{{ formData.zgfkdbh}}</el-link>
                  <el-link v-else-if="formData.glzybgid" type="info" class="foc-link" :underline="false"  @click="handleViewZybg">{{formData.lylx === 20 ? '自愿报告' : '举报信息'}}:{{ formData.zybgbh}}</el-link>
                  <span v-else>手工录入</span>
              </el-form-item>
          </vp-col>
          </el-row>
          <el-row >
            <vp-col :span="1" >
                <el-form-item prop="mc">
                  <template #label><vp-label zh="安全隐患名称" en="Hazard Name"/></template>
                  <el-input maxlength="1300"
                  v-model.trim="formData.mc"
                  :autosize="{ minRows: 2}"
                    type="textarea"
                  v-if="type === 'add' || type === 'edit' || type === 'forceEdit'"
                />
                <sapn v-else>{{ formData.mc }}</sapn>
                </el-form-item>
            </vp-col>
          </el-row>
          <el-row>
            <vp-col :span="4" >
              <el-form-item prop="ly">
                <template #label><vp-label zh="来源" en="Source"/></template>
                <DictSelect 
                  :lxid='2008'
                  :selectedId="formData.ly"
                  @dictSelected='(data: any) => {formData.ly = data}'
                  v-if="type === 'add' || type === 'edit' || type === 'forceEdit'"
                  class="w100"
                />
                <sapn v-else>{{ formData.ly }}</sapn>
              </el-form-item>
          </vp-col>
          <vp-col :span="4">
            <el-form-item prop="fxrq">
              <template #label><vp-label zh="发现日期" en="Discovery Date"/></template>
              <el-date-picker
                v-model="formData.fxrq"
                type="date"
                style="width: 100%"
                value-format="YYYY-MM-DD"
                v-if="type === 'add' || type === 'edit' || type === 'forceEdit'"
              ></el-date-picker>
              <span v-else>{{ formData.fxrq }}</span>
            </el-form-item>
          </vp-col>
          <vp-col :span="4" >
              <el-form-item prop="yhlb">
                <template #label><vp-label zh="隐患类别" en="Hazard Cat."/></template>
                <DictSelect 
                  :lxid='2009'
                  :selectedId="formData.yhlb"
                  @dictSelected='(data: any) => {formData.yhlb = data}'
                  v-if="type === 'add' || type === 'edit' || type === 'forceEdit' "
                  class="w100"
                />
                <sapn v-else>{{ formData.yhlb }}</sapn>
              </el-form-item>
          </vp-col>
      </el-row>
      <el-row >
        <vp-col :span="1" >
            <el-form-item prop="yyfx">
              <template #label><vp-label zh="原因分析" en="Cause Analysis"/></template>
              <el-input maxlength="1300"
              v-model.trim="formData.yyfx"
              v-if="type === 'add' || type === 'edit' || type === 'forceEdit'"
              :autosize="{ minRows: 3}"
                type="textarea"
            />
            <sapn v-else>{{ formData.yyfx }}</sapn>
            </el-form-item>
        </vp-col>
      </el-row>
      <el-row >
        <vp-col :span="1" >
            <el-form-item prop="gldfxkzcs">
              <template #label><vp-label zh="关联的风险控制措施" en="Related Risk Control Measures"/></template>
              <el-input maxlength="1300"
              v-model.trim="formData.gldfxkzcs"
              v-if="type === 'add' || type === 'edit' || type === 'forceEdit'"
              :autosize="{ minRows: 3}"
                type="textarea"
            />
            <sapn v-else>{{ formData.gldfxkzcs }}</sapn>
            </el-form-item>
        </vp-col>
      </el-row>
      <el-row >
        <vp-col :span="1" >
            <el-form-item prop="gldhg">
              <template #label><vp-label zh="关联的后果" en="Assoc. Consequences"/></template>
              <el-input maxlength="1300"
              v-model.trim="formData.gldhg"
              v-if="type === 'add' || type === 'edit' || type === 'forceEdit'"
              :autosize="{ minRows: 3}"
                type="textarea"
            />
            <sapn v-else>{{ formData.gldhg }}</sapn>
            </el-form-item>
        </vp-col>
      </el-row>
     </vp-card> 
      <vp-card>
        <template #header>
          <vp-label zh="整改情况" en="Rectification Status"/>
        </template>
        <el-row>
          <vp-col :span="4">
            <el-form-item prop="zgbmmc">
              <template #label><vp-label zh="整改单位/部门" en="Unit/Department"/></template>
              <el-input
                  v-model="formData.zgbmmc"
                  readonly
                  v-if="type === 'add' || type === 'edit' || type === 'forceEdit'"
                >
                  <template #append>
                    <el-button @click="handleSearchDprt"><SvgIcon name="ele-Search"/></el-button>
                  </template>
              </el-input>
              <span v-else>{{ formData.zgbmmc }}</span>
            </el-form-item>
          </vp-col>
          <vp-col :span="4">
            <el-form-item prop="zgrq">
              <template #label><vp-label zh="整改日期" en="Rect. Date"/></template>
              <el-date-picker
                v-model="formData.zgrq"
                type="date"
                style="width: 100%"
                value-format="YYYY-MM-DD"
                v-if="type === 'add' || type === 'edit' || type === 'forceEdit'"
              ></el-date-picker>
              <span v-else>{{ formData.zgrq }}</span>
            </el-form-item>
          </vp-col>
        </el-row>
        <el-row>
          <vp-col :span="1" >
            <el-form-item prop="zgcs">
              <template #label><vp-label zh="整改措施" en="Rect. Measure"/></template>
              <el-input maxlength="1300"
              v-model.trim="formData.zgcs"
              v-if="type === 'add' || type === 'edit' || type === 'forceEdit'"
              :autosize="{ minRows: 3}"
                type="textarea"
            />
            <sapn v-else>{{ formData.zgcs }}</sapn>
            </el-form-item>
          </vp-col>
        </el-row>
        <el-row>
          <vp-col :span="1" >
            <el-form-item prop="zgzj">
              <template #label><vp-label zh="整改资金" en="Rect. Fund"/></template>
              <el-input maxlength="100"
              v-model.trim="formData.zgzj"
              v-if="type === 'add' || type === 'edit' || type === 'forceEdit'"
            />
            <sapn v-else>{{ formData.zgzj }}</sapn>
            </el-form-item>
          </vp-col>
        </el-row>
        <el-row>
          <vp-col :span="1" >
            <el-form-item prop="yjya">
              <template #label><vp-label zh="应急预案" en="Emergency Plan"/></template>
              <el-input maxlength="1300"
              v-model.trim="formData.yjya"
              v-if="type === 'add' || type === 'edit' || type === 'forceEdit'"
              :autosize="{ minRows: 3}"
                type="textarea"
            />
            <sapn v-else>{{ formData.yjya }}</sapn>
            </el-form-item>
          </vp-col>
        </el-row>
      </vp-card>
      <vp-card>
        <template #header>
          <vp-label zh="措施验证情况" en="Measures Verification Status"/>
        </template>
        <el-row>
          <vp-col :span="4" >
            <el-form-item prop="csyzr">
              <template #label><vp-label zh="措施验证人" en="Measures Verifier"/></template>
              <el-input maxlength="100"
              v-model.trim="formData.csyzr"
              v-if="type === 'add' || type === 'edit' || type === 'forceEdit'"
            />
            <sapn v-else>{{ formData.csyzr }}</sapn>
            </el-form-item>
          </vp-col>
          <vp-col :span="4">
            <el-form-item prop="yzrq">
              <template #label><vp-label zh="验证日期" en="Verification Date"/></template>
              <el-date-picker
                v-model="formData.yzrq"
                type="date"
                style="width: 100%"
                value-format="YYYY-MM-DD"
                v-if="type === 'add' || type === 'edit' || type === 'forceEdit'"
              ></el-date-picker>
              <span v-else>{{ formData.yzrq }}</span>
            </el-form-item>
          </vp-col>
        </el-row>
        <el-row>
          <vp-col :span="1" >
            <el-form-item prop="zlxgyzqk">
              <template #label><vp-label zh="治理效果验证情况" en="Verification Status"/></template>
              <el-input maxlength="1300"
              v-model.trim="formData.zlxgyzqk"
              v-if="type === 'add' || type === 'edit' || type === 'forceEdit'"
              :autosize="{ minRows: 3}"
                type="textarea"
            />
            <sapn v-else>{{ formData.zlxgyzqk }}</sapn>
            </el-form-item>
          </vp-col>
        </el-row>
        <el-row>
          <vp-col :span="4" >
              <el-form-item prop="gbbs">
                <template #label><vp-label zh="是否关闭" en="Is Closed"/></template>
                  <el-radio-group v-model="formData.gbbs" v-if="type === 'add' || type === 'edit' || type === 'forceEdit' ">
                      <el-radio :label="1">是 YES</el-radio>
                      <el-radio :label="0">否 NO</el-radio>
                  </el-radio-group>
                  <span v-else>{{ formData.gbbs == 1 ? '是 YES' : formData.gbbs == 0 ? '否 NO'  : '' }}</span>
              </el-form-item>
          </vp-col>
          <vp-col :span="4" v-if="formData.gbbs == 1">
            <el-form-item prop="gbrq" :class="type == 'add' || type === 'edit' || type === 'forceEdit' ? 'is-required' : ''">
              <template #label><vp-label zh="关闭日期" en="Closed Date"/></template>
              <el-date-picker
                v-model="formData.gbrq"
                type="date"
                style="width: 100%"
                value-format="YYYY-MM-DD"
                v-if="type === 'add' || type === 'edit' || type === 'forceEdit'"
              ></el-date-picker>
              <span v-else>{{ formData.gbrq }}</span>
            </el-form-item>
          </vp-col>
        </el-row>
        <el-row  v-if="type === 'add' || type === 'edit'">
          <vp-col :span="4" >
            <el-form-item prop="shr" >
              <template #label><vp-label zh="审核人" en="Reviewer"/></template>
                  <el-input
                    v-model="formData.shr"
                    @blur="formData.shr = $event.target.value.trim()"
                    maxlength="1300"
                    readonly
                  >
                  <template #append>
                    <el-button @click="handleSearchFkr"><SvgIcon name="ele-Search"/></el-button>
                  </template>
                  </el-input>
            </el-form-item>
          </vp-col>
        </el-row>
      </vp-card> 
      <FileListCard
          class="mt4 w100"
          :readOnly="type == 'audit' || type == 'view'"
          :attachmentList.sync="formData.attachments"
          @attachmentListEmit="getAttachmentListEmit($event)"
        >
        </FileListCard> 
  </el-form>
  <UserDialog ref="userDialogRef"></UserDialog>
  <DepartmentDialog ref="departmentRef"></DepartmentDialog>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRefs } from "vue";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import request from "/@/utils/request";
import validateUtils from "/@/utils/validateUtils";
import FileListCard from '/@/components/vp/file/VpFileListCard.vue';
import UserDialog from '/@/components/vp/user/VpUserDialog.vue';
import { i18n } from "/@/i18n";
import DepartmentDialog from '/@/components/vp/department/VpDepartmentDialog.vue';
import DictSelect from '/@/components/vp/dict/VpDictSelect.vue';

export default defineComponent({
  name: "hiddenenTroubleDeptCommon",
  components: {
    FileListCard,
    UserDialog,
    DepartmentDialog,
    DictSelect,
  },
  props: {
    id: String,
    type: String,
    jb:Number
  },
  emits: ["dataEmits"],
  setup(props, context) {
    const state = reactive({
      type: "add",
      loading: false,
      saveLoading: false,
      termInputType: 1,
      formData: {
        id: "",
        jb: null,
        bh: "",
        zdbs: null,
        glzgfkdid: "",
        glzgfkdbh: "",
        glaqyhid: "",
        glaqyhbh: "",
        yyfx: "",
        ly: "",
        fxrq: "",
        yhlb: "",
        gldfxkzcs:"",
        gldhg: "",
        zgbmid: "",
        zgbmmc: "",
        creatorDeptCode: "",
        zgrq: "",
        zgcs: "",
        zgzj: "",
        yjya: "",
        csyzqk: "",
        csyzr: "",
        yzrq: "",
        zlxgyzqk: "",
        gbbs: null,
        gbrq: "",
        shrid: "",
        shr: "",
        attachments: [],
      },
      formRules: {
        zdbs: [validateUtils.notNull],
        mc: [validateUtils.notNull],
        ly: [validateUtils.notNull],
        fxrq: [validateUtils.notNull],
        yhlb: [validateUtils.notNull],
        yyfx: [validateUtils.notNull],
        gldfxkzcs: [validateUtils.notNull],
        gldhg: [validateUtils.notNull],
        zgbmmc: [validateUtils.notNull],
        zgrq: [validateUtils.notNull],
        zgcs: [validateUtils.notNull],
        csyzr: [validateUtils.notNull],
        yzrq: [validateUtils.notNull],
        zlxgyzqk: [validateUtils.notNull],
        gbbs: [validateUtils.notNull],
        shr: [validateUtils.notNull],
        gbrq: [{
              message: '必填/Required.',
              validator: (rule: any, value: any, callback: any)=>{
                  if (state.formData.gbbs == 1 && !state.formData.gbrq) {
                      callback(new Error());
                  } else {
                      callback();
                  }
              },
          }],
      },
    });

    const initFormData = () => {
      state.formData = {
          id: "",
          jb: null,
          bh: "",
          zdbs: null,
          glzgfkdid: "",
          glzgfkdbh: "",
          glaqyhid: "",
          glaqyhbh: "",
          yyfx: "",
          ly: "",
          fxrq: "",
          yhlb: "",
          gldfxkzcs:"",
          gldhg: "",
          zgbmid: "",
          zgbmmc: "",
          creatorDeptCode: "",
          zgrq: "",
          zgcs: "",
          zgzj: "",
          yjya: "",
          csyzqk: "",
          csyzr: "",
          yzrq: "",
          zlxgyzqk: "",
          gbbs: null,
          gbrq: "",
          shrid: "",
          shr: "",
          attachments: [],
      };
    };

    const editDialogRef = ref();
    const formRef = ref();
    const router = useRouter();
    const { t } = useI18n();

    const handleOpen = (type: string, id: string, jb: number) => {
      state.type = type;
      initFormData();
      if (type != "add") {
        state.loading = true;
        request.get(`/safe/deptHiddenTrouble/${id}`).then((res) => {
          state.formData = {
            ...state.formData,
            ...res.data,
          };
          state.loading = false;
          context.emit("dataEmits", state.formData);
        });
      }else{
        state.formData.jb = jb;
      }
    };


    onMounted(() => {
      handleOpen(props.type || "add", props.id || "", props.jb || 10);
    });

    const getAttachmentListEmit = (list: any) => {
        state.formData.attachments = list;
    };

    const getData = (zt : number): Promise<any>=>{
      let promise = new Promise((resolve, reject) => {
          if(zt == 10){
            if(state.formData.jb == 10){
              formRef.value.validateField(['zgbmmc'], (valid: boolean) => {
                  if (valid) {
                      resolve({
                          ...state.formData
                      });
                  } else {
                      reject();
                  }
              })
            }else {
              resolve({
                    ...state.formData
                });
                return;
            }
          }else{
            formRef.value.validate((valid: boolean) => {
              if (valid) {
                  resolve({
                      ...state.formData
                  });
              } else {
                  reject();
              }
            }) 
          }
      })
      return promise; 
    }

    const userDialogRef = ref();

    const handleSearchFkr = () =>{
      userDialogRef.value.handleOpen({
        type: 1,
        multi: false,
        selected: state.formData.shrid,
        callback: (data: any) => {
          state.formData.shrid = data.yhid;
          state.formData.shr = data.xm;
        }
      });
    }
    const departmentRef = ref();
    const handleSearchDprt =() =>{
        departmentRef.value.handleOpen({
          selectedId: state.formData.zgbmid,
          callback: (data: any) => {
            state.formData.zgbmid = data.id;
            state.formData.zgbmmc = data.dprtname;
            state.formData.creatorDeptCode = data.dprtcode;
          }
        });
      }

      const handleViewZgfkd = () =>{
        router.push({
          name: 'viewRectification',
          params: {
            id: state.formData.glzgfkdid,
          },
        });
      }  

      const handleViewGlyh = () =>{
        router.push({
          name: 'viewHiddenTrouble',
          params: {
            id: state.formData.glaqyhid,
          },
        });
      }  

      const handleViewZybg = () =>{
        if(state.formData.lylx == 20){
          router.push({
            name: 'viewVoluntaryOrgHandle',
            params: {
              id: state.formData.glzybgmxid,
            },
          });
        }else {
          router.push({
            name: 'viewReportOrgHandle',
            params: {
              id: state.formData.glzybgmxid,
            },
          });
        }
      }

    return {
      ...toRefs(state),
      ...toRefs(props),
      editDialogRef,
      formRef,
      handleOpen,
      getAttachmentListEmit,
      getData,
      userDialogRef,
      handleSearchFkr,
      handleSearchDprt,
      departmentRef,
      handleViewZgfkd,
      handleViewGlyh,
      handleViewZybg,
    };
  },
});
</script>

<style lang="scss" scoped>
.drawer {
  :deep(.el-checkbox__label) {
    min-width: 80px;
  }
}
.el-space {
  margin-top: 0px;
}
:deep(.el-space__item) {
    padding-bottom: 0px !important;
     margin-right: 0px !important;
}
:deep(.el-divider--horizontal){
    display: block;
    height: 1px;
    width: 100%;
    margin: 0;
    border-top: 1px var(--el-border-color) var(--el-border-style);
}
:deep(.ycds-class .el-form-item__label) {
  width: 200px !important;
}
</style>
